import React from 'react';
import { Card, Row, Col, Icon } from 'antd';
import { DispatchProp, connect } from 'dva';
import GiteeQRCode from '@/assets/Gitee.png';
import GitHubQRCode from '@/assets/GitHub.png';

import styles from './Welcome.less';
import { WelcomeInfo } from '../models/welcome';
import { StoreState } from '@/common/store/store';

interface WelcomeProps extends DispatchProp {
  info: WelcomeInfo;
}

const Welcome: React.FC<WelcomeProps> = props => {
  const { todayTotalOrderCount, todayTotalSalesAmount, yesterdayTotalSalesAmount } = props.info;

  return (
    <div className={styles.main}>
      <Row type="flex" justify="space-around">
        <Col span={5}>
          <Card
            type="inner"
            headStyle={{ background: '#f2f6fc', fontWeight: 700, color: '#606266' }}
            title="前台商城"
            style={{ marginBottom: '24px', fontSize: '18px' }}
          >
            <a
              href="https://gitee.com/reborn1627/mall-app-vue"
              target="_blank"
              rel="noopener noreferrer"
            >
              mall-app-vue
            </a>
          </Card>
          <Card type="inner" style={{ marginBottom: '24px', fontSize: '16px' }}>
            <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
              <Icon type="file-search" style={{ fontSize: '60px', color: '#409EFF' }} />
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'flex-end',
                  marginLeft: '5px',
                }}
              >
                <span style={{ textIndent: '2.5px' }}>今日订单总数</span>
                <span style={{ textIndent: '2.5px' }}>{todayTotalOrderCount}</span>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={5}>
          <Card
            headStyle={{ background: '#f2f6fc', fontWeight: 700, color: '#606266' }}
            type="inner"
            title="后台管理"
            style={{ marginBottom: '24px', fontSize: '18px' }}
          >
            <a
              href="https://gitee.com/reborn1627/mall-admin-react"
              target="_blank"
              rel="noopener noreferrer"
            >
              mall-admin-react
            </a>
          </Card>
          <Card type="inner" style={{ marginBottom: '24px', fontSize: '16px' }}>
            <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
              <Icon type="pay-circle" style={{ fontSize: '60px', color: '#409EFF' }} />
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'flex-end',
                  marginLeft: '5px',
                }}
              >
                <span style={{ textIndent: '2.5px' }}>今日销售总额</span>
                <span>￥{todayTotalSalesAmount}</span>
              </div>
            </div>
          </Card>
        </Col>{' '}
        <Col span={5}>
          <Card
            headStyle={{ background: '#f2f6fc', fontWeight: 700, color: '#606266' }}
            type="inner"
            title="后端接口"
            style={{ marginBottom: '24px', fontSize: '18px' }}
          >
            <a
              href="https://gitee.com/reborn1627/mall-api-java"
              target="_blank"
              rel="noopener noreferrer"
            >
              mall-api-java
            </a>
          </Card>
          <Card type="inner" style={{ marginBottom: '24px', fontSize: '16px' }}>
            <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
              <Icon type="shopping-cart" style={{ fontSize: '60px', color: '#409EFF' }} />
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'flex-end',
                  marginLeft: '5px',
                }}
              >
                <span style={{ textIndent: '2.5px' }}>昨日销售总额</span>
                <span>￥{yesterdayTotalSalesAmount}</span>
              </div>
            </div>
          </Card>
        </Col>{' '}
        <Col span={7}>
          <Card style={{ marginBottom: '24px', fontSize: '17px' }}>
            <Row type="flex" justify="space-between">
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <img
                  src={GiteeQRCode}
                  alt=""
                  style={{ width: '130px', height: '130px', marginTop: '6px' }}
                />
                <p style={{ alignSelf: 'center', marginBottom: '0', marginTop: '12px' }}>
                  <Icon type="github" style={{ marginRight: '7px' }} />
                  <a href="https://gitee.com/reborn1627" target="_blank" rel="noopener noreferrer">
                    Gitee
                  </a>
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <img
                  src={GitHubQRCode}
                  alt=""
                  style={{ width: '130px', height: '130px', marginTop: '6px' }}
                />
                <p style={{ alignSelf: 'center', marginBottom: '0', marginTop: '12px' }}>
                  <Icon type="github" style={{ marginRight: '7px' }} />
                  <a href="https://github.com/0reborn" target="_blank" rel="noopener noreferrer">
                    GitHub
                  </a>
                </p>
              </div>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

const mapStateToProps = (state: StoreState) => ({
  info: state.welcome.welcomeInfo,
});

export default connect(mapStateToProps)(Welcome);
